<template>
	<view>
		<view class="bg"></view>
		<view class="container">
			<view class="info" @click="goUrl('info')">
				<image :src="info.avatar" mode=""></image>
				<view class="name">
					{{info.nickname}}
				</view>
				<text class="post">
					{{info.post_name}}
				</text>
			</view>
			<view class="score">
				<image src="@/static/admin/icon/icon.png" mode=""></image>
				<view class="num">
					我的积分
					<text>{{info.score}}</text>
				</view>
				<view class="detail" @click="goUrl('detail')">
					积分明细
				</view>
			</view>
			<view class="list">
				<view class="col">
					<view class="left" @click="goUrl('order')">
						<image src="@/static/staff/user-icon1.png" mode=""></image>
						我的订单
					</view>
					<uni-icons type="forward" size="14" color="#aaa"></uni-icons>
				</view>
				<view class="col">
					<view class="left" @click="goUrl('message')">
						<image src="@/static/staff/user-icon2.png" mode=""></image>
						消息通知
					</view>
					<uni-icons type="forward" size="14" color="#aaa"></uni-icons>
				</view>
			<!-- 	<view class="col">
					<view class="left">
						<image src="@/static/staff/user-icon3.png" mode=""></image>
						意见反馈
					</view>
					<uni-icons type="forward" size="14" color="#aaa"></uni-icons>
				</view> -->
			</view>
		</view>
		<tabbar active='3'></tabbar>
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar_staff.vue"
	export default {
		components: {
			tabbar
		},

		data() {
			return {
				info: {}
			}
		},
		onShow() {
			uni.hideHomeButton()
			this.getList()
		},
		methods: {
			getList() {
				this.status = "loading"
				this.$post("/user/userinfo").then(res => {
					this.info = res.data
				})
			},
			goUrl(url) {
				uni.navigateTo({
					url: `./${url}/${url}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 600rpx;
		background: linear-gradient(#3670F6 60%, transparent);
	}

	.container {
		padding: 0 20rpx;
		position: relative;
	}

	.info {
		color: #fff;
		text-align: center;
		padding: 50rpx 0;

		image {
			width: 150rpx;
			height: 150rpx;
			border: 6px solid #FFFFFF;
			border-radius: 50%;
		}

		.name {
			font-size: 34rpx;
			margin: 30rpx 0;
		}

		.post {
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50px;
			padding: 10rpx 30rpx;
			font-size: 24rpx;
		}
	}

	.score {
		display: flex;
		align-items: center;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 46rpx 26rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);

		image {
			width: 88rpx;
			height: 88rpx;
		}

		.num {
			width: calc(100% - 244rpx);
			padding: 0 30rpx;
			font-size: 28rpx;
			color: #555;

			text {
				display: block;
				font-size: 48rpx;
				color: #FF5B5B;
			}
		}

		.detail {
			width: 156rpx;
			height: 44rpx;
			background: rgba(195, 195, 195, 0.2);
			border-radius: 22rpx;
			text-align: center;
			line-height: 44rpx;
			font-size: 24rpx;
			color: #5485F5;
		}
	}

	.list {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 26rpx;
		margin-top: 50rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.08);

		.col {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #eee;
			padding: 40rpx 0;

			&:last-child {
				border: none
			}

			.left {
				display: flex;
				align-items: center;
				font-size: 30rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>